<section>
  <d-splitter class="splitter-border" style="height: 300px">
    <d-splitter-pane size="30%" minSize="20%" (sizeChange)="sizeChange($event)">
      <div class="pane-content">
        <h2>Left</h2>
        <div>width: 30%, min-width: 20%</div>
      </div>
    </d-splitter-pane>
    <d-splitter-pane minSize="15%" [collapsible]="true" [collapseDirection]="'before'">
      <div class="pane-content">
        <h2>Center</h2>
        <div>Specify the folding and retracting direction to fold forward</div>
      </div>
    </d-splitter-pane>
    <d-splitter-pane minSize="15%">
      <div class="pane-content">
        <h2>Right</h2>
        <div>Content</div>
      </div>
    </d-splitter-pane>
  </d-splitter>
</section>
